<template>
  <div class="editor-container">
    <div class="editor-header"></div>
    <div class="editor-main-container">
      <!-- 模块部分 -->
      <div class="module" v-for="item in selectedList" :key="item.id" :data-id="item.id">
        <img :src="item.imgUrl"  class="module-image">
        <div class="editor-module">
          <a href="javascript:;" class="delete" @click="deleteItem(item)">删除</a>
        </div>
      </div>

      <!-- 所有模块按钮 -->
      <div class="edit-button-container">
        <div class="edit-button"  v-for="item in totalList" :key="item.id" :data-id="item.id">
          <a href="javascript:;" @click="edit(item)">{{ item.title }}</a>
          <img :src="item.imgUrl"  class="edit-image">
        </div>
      </div>
    </div>
    <!-- 保存按钮 -->
    <div class="save-container">
      <a href="javascript:;" class="save" @click="saveEdit">保存配置</a>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
        imglist:[],
        hasSelectedList: false,    // 是否有选择数据，用来判断保存时的method值。
    }
  },
  props: {
    // 所有模块数据
    totalList: {
      type: Array,
      default() {
        return [
            {id:1,imgUrl:"/static/m1.png",title:"爆品秒杀"},
            {id:2,imgUrl:"/static/m2.png",title:"居家生活"},
            {id:3,imgUrl:"/static/m3.png",title:"美妆护肤"},
            {id:4,imgUrl:"/static/m4.png",title:"数码家电"},
            {id:5,imgUrl:"/static/m5.png",title:"母婴保健"},
            {id:6,imgUrl:"/static/m6.png",title:"美食酒水"},
            {id:7,imgUrl:"/static/m7.png",title:"个护清洁"},
            {id:8,imgUrl:"/static/m8.png",title:"浙里集市"},
            {id:9,imgUrl:"/static/m9.png",title:"好物甄选"},
        ]
      }
    },

    // 已选择的模块数据
    selectedList: {
      type: Array,
      default() {
        return [
        
        ]
      }
    },
  },
  methods: {
   
   // 删除对应的模块
   deleteItem(item) {
     // 获取当前模块id，在已选择数据中将该模块删除
     const selectedList = this.selectedList;
     const id = item.id;
      for(let i = 0; i < selectedList.length; i++){
        if(id == selectedList[i].id){
          selectedList.splice(selectedList[i], 1);
        } 
      }
   },

   // 编辑模块
   edit(item) {
     // 先获取已编辑模块数据，如果该模块已经存在，提示后返回，否则追加到已选择数据中
     const selectedList = this.selectedList;
     const totalList = this.totalList;
     const id = item.id;
     const list = [];
      selectedList.forEach(item=>{
        list.push(item.id);
      });
      if(list.indexOf(id) > -1) {
        return this.$message({ message: "该模块已存在，请勿重复添加", type: "success" });
      }
      selectedList.push(item);
   },
  
    // 保存设置
    saveEdit() {
      const hasSelectedList = this.hasSelectedList;
      const selectedList = this.selectedList;
      // 先查询自己的编辑设置数据，再进行更新
      this.utils.request.queryUserInfo({
        t:"indexConfig",
        sql: "queryIndexSortConfigInfo",
        clt:1,
      },res=>{
        // debugger
         if(res.data == null){
          this.hasSelectedList = true;
         }else{
           this.hasSelectedList = false;
         }
        const method = hasSelectedList ? 'saveIndexSortConfigInfo' : 'updateIndexSortConfigInfo';
        // 请求接口
        this.$confirm("保存后将影响H5首页的展现，请确认是否保存？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
            this.utils.request.editInfo({
            "t":"indexConfig",
            "method":method,
            clt:1,
            val:selectedList.map(item => item.id).toString(),
            id:res == null? null : res.id,
            },data=>{
              this.$message({ message: "排版成功", type: "success" });
            })
          }).catch(() => {}); 
        
      });
      
      },

  },
  
  mounted() {
     let that = this;
    //  查询自己的设置模板数据
    this.utils.request.queryUserInfo({t:"indexConfig",sql:"queryIndexSortConfigInfo",clt:1},res=>{
        if(res.data == null){
          this.hasSelectedList = true;
          return;
        }
        let ids = res.data.val.split(",");
        for(let id in ids){
          for(let item in that.totalList){
              if(that.totalList[item].id == ids[id]){
                that.selectedList.push(that.totalList[item])
              }
          }
        }
    })
  }
}
</script>

<style lang="scss" scoped>
  .editor-container {
    width: 500px;
    height: 700px;
    overflow-y: scroll;
    height: auto;
    overflow: hidden;
    margin: 20px 0 0 20px;
    .editor-header {
      width: 100%;
      height: 80px;
      border: 1px solid #ddd;
      position: relative;
      background: #f5f5f5;
      border-radius: 20px 20px 0 0;
      box-sizing: border-box;
      &::before {
        display: block;
        content: '';
        width: 14px;
        height: 14px;
        border-radius: 7px;
        background: #ddd;
        position: absolute;
        top: 35px;
        left: 160px;
      }
      &::after {
        content: '';
        display: block;
        width: 100px;
        height: 14px;
        border-radius: 7px;
        background: #ddd;
        position: absolute;
        top: 35px;
        left: 190px;
      }
    }
    .editor-main-container {
      width: 100%;
      position: relative;
      background: #fff;
      border: 1px solid #ddd;
      border-top: 0 none;
      padding: 10px;
      box-sizing: border-box;
      .module {
        position: relative;
        width: 100%;
        margin-bottom: 5px;
        .module-image {
          display: block;
          width: 100%;
          height: auto;
        }
        .editor-module {
          display: none;
          width: 100%;
          height: 100%;
          border: 1px dashed red;
          position: absolute;
          top: 0;
          left: 0;
          .delete {
            display: inline-block;
            padding: 6px 10px;
            background-color: rgba(0,0,0,.7);
            color: #fff;
            font-size: 12px;
            position: absolute;
            top: 0;
            right: 0;
            text-decoration: none;
          }
        }
      }
      .module:hover .editor-module {
        display: block;
      }
      .edit-button-container {
        width: 100%;
        padding-bottom: 60px;
        height: auto;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        .edit-button {
          position: relative;
          background-color: #39ac69;
          margin: 10px 15px;
          font-size: 12px;
          border-radius: 2px;
          a {
            display: block;
            padding: 5px 10px;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            color: #fff;
            text-decoration: none;
          }
          .edit-image {
            display: none;
            position: absolute;
            bottom: 30px;
            left: 0;
            width: 200px;
            display: none;
            z-index: 9999;
          }
        }
        .edit-button:hover .edit-image {
          display: block;
        }
      }
    }
    .save-container {
      width: 460px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(0,0,0,.8);
      position: fixed;
      bottom: 0;
      .save {
        padding: 5px 10px;
        background-color: #39ac69;
        color: #fff;
        text-decoration: none;
        border-radius: 4px;
      }
    }
  }
</style>
